<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/background.css">
    <link rel="stylesheet" href="css/bottom.css">
    <script src="js/focus.js"></script>
    <script src="js/animate.js"></script>
    <script src="js/time.js"></script>
    <script src="js/login.js"></script>
    <style>
        .head-figure-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 180px;
            background-image: url("./images/background/head_figure_bg.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: auto 100%;
        }
    </style>
</head>

<body>
<!-- 头图大背景+雪花动画 -->
<section class="headerBg">
    <!-- 顶部大背景 头图 + 大焦点 -->
    <div id="headerBgImg">
        <p class="head-figure-bg"></p>
        <p class="banner-bg"></p>
    </div>
    <!-- 大焦点雪花动画 -->
    <div id="snowflake">
        <div class="snow"></div>
    </div>
</section>
<section class="mainpage">
    <!-- 顶部导航栏 -->
    <header class="header">
        <h2 class="brand">北京2022年冬奥会组织委员会信息平台</h2>
        <div class="time">
            <div class="date"></div>
            <div class="second"></div>
        </div>
    </header>

    <!-- 主体内容 -->
    <main>
        <!-- 左侧轮播图 -->
        <div class="left">
            <div class="left_container">
                <div class="focus">
                    <!-- 左侧按钮 -->
                    <a href="javascript:;" class="arrow-l"></a>
                    <!-- 右侧按钮 -->
                    <a href="javascript:;" class="arrow-r"></a>
                    <!-- 轮播图的图片 -->
                    <ul>
                        <li><img src="./images/rotation/lb3.jpg" height="830" alt="北京2022年冬残奥会举行闭幕式"></li>
                        <li><img src="./images/rotation/lb2.png"  height= "830" alt="《双奥之城 城市之光》北京冬奥会主办城市系列网络宣传推广活动圆满收官"></li>
                        <li><img src="./images/rotation/lb1.jpg"  height= "830" alt="花样滑冰双人滑：中国选手隋文静韩聪夺冠"></li>
                    </ul>
                    <!-- 小圆点 -->
                    <ol class="circle"></ol>
                </div>
            </div>
        </div>
        <!-- 右侧登陆界面 -->
        <div class="right">
            <form action="login-servlet" method="post" class="login_container">
                <!-- 登录方式 -->
                <div class="login_method">
                    <span><a href="javascript:" class="account_a">账号登录</a></span>
                    <span><a href="javascript:" class="phone_a">邮箱登录</a> </span>
                </div>
                <!-- 分割线 -->
                <div class="hline"></div>
                <!-- 输入框-->
                <div class="input_box"></div>
                <!-- 用户账号相关-->
                <div class="user-condition">
                    <!-- 账号注销 -->
                    <a href="./jsp/cancellation.jsp" class="cancel">账号注销</a>
                    <!-- 修改密码 -->
                    <a href="./jsp/changePwd.jsp" class="forget_pwd">修改密码</a>
                </div>
                <!-- 登录按钮 -->
                <input type="submit" class="click_login" value="登 录"/>
                <!-- 未注册 -->
                <a href="./jsp/register.jsp" class="to_register">未注册，先去注册</a>
            </form>
            <!-- 其他登录方式 -->
            <div class="other_methods">
                <div class="ways">其他登录方式</div>
                <a href="javascript:" class="icon qq"></a>
                <a href="javascript:" class="icon wechat"></a>
                <div class="admin">
                    <a href="./jsp/adminLogin.jsp">管理员身份登录</a>
                </div>
            </div>
        </div>
    </main>
</section>
<!-- 底部内容 -->
<section id="copyright" class="bottom bottomSec">
    <div class="content">
        <div class="about">
            <p>Developed by Xiaolei Wei</p>
            <p>Beijing 2022 Olympic Winter Games</p>
        </div>
    </div>
</section>

</body>
</html>